<template>
  <!-- 分类 -->
  <scroll-view
    class="h-[86rpx] w-full flex my-[24rpx] text-[36rpx] text-white"
    scroll-x>
    <view class="flex gap-[16rpx] items-center pl-[16rpx]">
      <view
        class="w-[152rpx] h-full flex-shrink-0 transition-all duration-300 relative text-center leading-[86rpx] font-heiti rounded-[24rpx]"
        :class="{
          classfy: currentIndex == index,
        }"
        v-for="(item, index) in list"
        :key="index"
        @click="classfyChange(index, item)">
        <up-image
          class="absolute top-0 left-0"
          width="152rpx"
          height="86rpx"
          bgColor="transparent"
          :src="classfy_active"
          :showMenuByLongpress="false"
          v-if="currentIndex === index"></up-image>
        <up-image
          class="absolute top-0 left-0"
          width="152rpx"
          height="86rpx"
          bgColor="transparent"
          :src="classfy"
          :showMenuByLongpress="false"
          v-else></up-image>
        <view
          :class="{
            classfy_text: currentIndex == index,
          }"
          :data-text="item.name">
          {{ item.name }}
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import classfy from "@/static/images/index/classfy.png"; //分类
import classfy_active from "@/static/images/index/classfy_active.png"; //分类
import { ref } from "vue";
/**
 * 分类切换
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  defaultIndex: {
    type: Number,
    default: 0,
  },
});
const currentIndex = ref(props.defaultIndex);
const emit = defineEmits(["classfyChange"]);
const classfyChange = (index, item) => {
  if (currentIndex.value === index) return;
  currentIndex.value = index;
  emit("classfyChange", { index, item });
};
</script>

<style lang="scss" scoped>
//classfy渐变
.classfy {
  background-color: transparent;
}
.classfy::before {
  content: "";
  position: absolute;
  border-radius: 24rpx;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    #94121d 0%,
    rgba(148, 18, 29, 0) 42%,
    rgba(148, 18, 29, 0) 58%,
    #94121d 100%
  );
  opacity: 0; /* 初始时伪元素完全透明 */
  animation: opacityTransition 1s infinite alternate;
}
.classfy_text {
  animation: shake 0.3s linear forwards;
  //文字阴影
  text-shadow: -5rpx 5rpx #94121d;
}
//文字抖动动画
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10rpx);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10rpx);
  }
}
@keyframes opacityTransition {
  0% {
    opacity: 0; /* 伪元素在动画开始时完全透明 */
  }
  100% {
    opacity: 1; /* 伪元素在动画结束时完全不透明 */
  }
}
</style>
